<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>擒龙伏虎</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no ,viewport-fit=cover"
    />

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
      .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .el-col {
        border-radius: 4px;
      }
      .bg-purple-dark {
        background: #99a9bf;
      }
      .bg-purple {
        background: #d3dce6;
      }
      .bg-purple-light {
        background: #e5e9f2;
      }
      .grid-content {
        border-radius: 4px;
        min-height: 36px;
      }
      .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
      }

      .demo-table-expand {
        font-size: 0;
      }
      .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
      }
      .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
      }

      .el-table__expanded-cell[class*=cell] {
          padding: 20px 20px;
      }
    </style>
  </head>

  <body style="margin: 0;">
    <div id="app">
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%; min-width: 640px;"
        :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.list | top3" style="width: 100%">
              <el-table-column prop="name" label="名称">
                <template slot-scope="scope">
                  <a v-bind:href="scope.row.code | links" target="_blank">{{
                    scope.row.name
                  }}</a>
                </template>
              </el-table-column>
              <el-table-column prop="code" label="代码"> </el-table-column>
              <el-table-column prop="close" label="收盘价"> </el-table-column>
              <el-table-column prop="up" label="涨幅"> </el-table-column>
              <el-table-column prop="vol" label="交易量"> </el-table-column>
              <el-table-column prop="last" label="连板数"> </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="日期" prop="date" width='90'>
        </el-table-column>
        <el-table-column label="最大连板" prop="max" width='90'>
        </el-table-column>
        <el-table-column label="统计结果" prop="total"> </el-table-column>
      </el-table>
    </div>
  </body>

  <script>
    // import Vue from 'vue';
    // import ElementUI from 'element-ui';
    // import 'element-ui/lib/theme-chalk/index.css';
    // import App from './App.vue';

    // Vue.use(ElementUI);
    function ready(fn) {
      if (document.addEventListener) {
        //标准浏览器
        document.addEventListener(
          'DOMContentLoaded',
          function() {
            //注销时间，避免重复触发
            document.removeEventListener(
              'DOMContentLoaded',
              arguments.callee,
              false
            )
            fn() //运行函数
          },
          false
        )
      } else if (document.attachEvent) {
        //IE浏览器
        document.attachEvent('onreadystatechange', function() {
          if (document.readyState == 'complete') {
            document.detachEvent('onreadystatechange', arguments.callee)
            fn() //函数运行
          }
        })
      }
    }
    ready(function() {
      var app = new Vue({
        el: '#app',
        created: function() {
          this.queryResult()
        },

        methods: {
          queryResult: function() {
            var self = this
            self.loading = self.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            $.getJSON('ups/total.json', function(data) {
              self.tableData = data
              setTimeout(() => {
                self.loading.close()
              }, 1000)
            })
          }
        },

        data() {
          return {
            tableData: null,
            loading: null
          }
        },
        filters: {
          links: function(value) {
            if (!value) return ''
            value = value.substring(0, 6)
            return 'https://www.laohu8.com/hq/s/' + value
          },
          top3: function(value) {
            return value.filter(function(e){
              return e.last > 2;
            })
          }
        }
      })
    })
  </script>
</html>
